<template>
  <div>
    <header class="header">
      <div>left</div>
      <div>center</div>
      <div>right</div>
    </header>
  </div>
</template>

<script setup lang=ts>
import {ref} from 'vue'

</script>

<style scoped lang="less">
.header{
  display: flex;
  
  div{
    height: 50px;
    line-height: 50px;
    color: #fff;
    text-align: center;
  }
  //px 固定单位
  //rem r = root 1rem = html font-size 16px 1rem = 16px
  //vw vh 相对于视口宽高进行控制
  //百分比是相对于父元素的viewport 
  div:nth-child(1){
    width:100xm;
    background-color: #f00;
  }
  div:nth-child(2){
    flex:1;
    background-color: #0f0;
  }
  div:nth-child(3){
    width: 100xm;
    background-color: #00f;
  }
}
</style>